<template>
  <div id="digitalbase">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>我的基地</el-breadcrumb-item>
      <el-breadcrumb-item>数字基地</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="cardBody">
      <el-row class="globalHeader" style="margin-bottom: 20px">
        <el-col :span="4">
          <i class="el-icon-s-data"></i> <span>数字基地</span></el-col
        >
        <el-col style="width: 100px; float: right">
          <el-button
            type="primary"
            style="float: right"
            plain
            @click="showAuthority"
            >所持权限</el-button
          >
        </el-col>
      </el-row>
      <el-row justify="space-around" type="flex">
        <el-col :span="6">
          <el-card shadow="always">
            <el-carousel height="180px" indicator-position="outside">
              <el-carousel-item v-for="item in picSets" :key="item">
                <el-image :src="item"></el-image>
              </el-carousel-item>
            </el-carousel>
            <el-row class="baseInformation">
              <p>
                <i class="el-icon-office-building"></i>
                {{ baseInfoForm.baseName }}
              </p>
              <p>
                <i class="el-icon-user"></i>
                {{ baseInfoForm.createBy }}
              </p>
              <p>
                <i class="el-icon-map-location"></i>
                {{ baseInfoForm.baseAddr }}
              </p>
              <p>
                <i class="el-icon-pie-chart"></i>
                池塘总面积：{{ pondInfo.volume }}m²
              </p>
              <p>
                <i class="el-icon-data-line"></i>
                池塘数量：{{ pondInfo.pondNum }}
              </p>
            </el-row>
          </el-card>
        </el-col>
        <el-col :span="11">
          <el-card shadow="always">
            <Map
              :receiptAddress="baseInfoForm.baseAddr"
              :zoomSize="17"
              ref="digitalMap"
            />
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="always">
            <el-carousel
              height="450px"
              :interval="4000"
              indicator-position="outside"
            >
              <el-carousel-item
                style="border: none"
                v-for="(item, index) in weatherData.list"
                :key="index"
              >
                <WeatherCard
                  :weatherIndex="
                    weatherFlag === 1 && index === 0 ? item.numtq1 : item.numtq2
                  "
                />
                <div class="weatherContent">
                  <el-row class="weatherTop">
                    <el-col :span="12" class="weatherDay">{{
                      index === 0 ? '今' : '明'
                    }}</el-col>
                    <el-col :span="12" class="weatherRightTop">
                      <p>{{ weatherData.cityName }}</p>
                      <div>{{ item.date }}</div>
                    </el-col>
                  </el-row>
                  <el-row class="weatherBottom">
                    <el-col :span="12" class="weatherBL">
                      <p style="font-weight: bold; font-size: 20px">早</p>
                      <p>气温:{{ item.qw1 }} ℃</p>
                      <p>天气:{{ item.tq1 }}</p>
                      <p>风力:{{ item.fl1 }}</p>
                    </el-col>
                    <el-col :span="12" class="weatherBR">
                      <p style="font-weight: bold; font-size: 20px">晚</p>
                      <p>气温:{{ item.qw2 }} ℃</p>
                      <p>天气:{{ item.tq2 }}</p>
                      <p>风力:{{ item.fl2 }}</p>
                    </el-col>
                  </el-row>
                </div>
              </el-carousel-item>
            </el-carousel>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <el-dialog :visible.sync="isShowAuthority" title="拥有权限">
      <el-row :class="['vcenter', 'bdbottom', 'bdtop']">
        <!-- 渲染一级权限 -->
        <el-col :span="5"
          ><el-tag>{{ permissionList.remarks }}</el-tag
          ><i class="el-icon-caret-right"></i
        ></el-col>
        <el-col :span="19">
          <!-- 渲染二级权限 -->
          <el-row
            v-for="(item2, i2) in permissionList.children"
            :class="[i2 === 0 ? '' : 'bdtop', 'vcenter']"
            style="margin-bottom: 0px"
            :key="item2.id"
          >
            <el-col :span="6">
              <el-tag type="success">
                {{ item2.remarks }}
              </el-tag>
              <i class="el-icon-caret-right"></i>
            </el-col>
            <el-col :span="18">
              <el-tag
                type="warning"
                v-for="item3 in item2.children"
                :key="item3.id"
              >
                {{ item3.remarks }}
              </el-tag>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios'
import WeatherCard from './weather/WeatherCard'
import Map from '../Map'
import { mapState, mapMutations } from 'vuex'
export default {
  name: 'DigitalBase',
  components: {
    Map,
    WeatherCard,
  },
  data() {
    return {
      timer: null,
      isShowAuthority: false,
      baseId: this.$store.state.baseId,
      key: 'pwft87o59d5qillf',
      baseInfoForm: {
        baseName: '',
        baseIntroduction: '',
        baseAddr: '',
        basePositionLongitude: '',
        basePositionLatitude: '',
        createBy: '',
        createDate: '',
        registNumber: '',
        funds: 0,
        scope: '',
        basePic: '',
      },
      weatherInfo: {
        cityName: '',
        temperature: '',
        humidity: '',
        weather: '',
        date: [],
        windDir: '',
        windSpeed: '',
        weatherIndex: '',
      },
      weatherData: {},
      weatherFlag: 1,
      picSets: [],
      pondInfo: {
        volume: 0,
        pondNum: 0,
      },
    }
  },
  methods: {
    ...mapMutations(['setPermissionList']),
    showAuthority() {
      this.isShowAuthority = true
    },
    async getBaseInfo() {
      const { data: res } = await this.$http.get(`/base/${this.baseId}`)
      console.log(res)
      if (res.code === 20000) {
        this.baseInfoForm = res.data
        this.address = res.data.baseAddr
        this.lat = res.data.basePositionLatitude
        this.lng = res.data.basePositionLongitude
        if (res.data.basePic !== '') this.picSets = res.data.basePic.split(';')
      }
    },
    async getPondInfo() {
      const { data: res } = await this.$http.get(`/pond/volume/${this.baseId}`)
      this.pondInfo.volume = res.volume
      this.pondInfo.pondNum = res.pondNum
    },
    async getWeather1() {
      const { data: res } = await this.$http.get(
        'http://api.yytianqi.com/forecast7d',
        {
          params: {
            city: (this.lat += 0) + ',' + (this.lng += 0),
            key: this.key,
          },
        }
      )
      if (res.code === 1) {
        this.weatherData = res.data
        let sj = parseInt(res.data.sj.split(' ')[1].split(':')[0])
        if ((sj > 0 && sj <= 6) || (sj >= 18 && sj <= 24)) this.weatherFlag = 2
        else this.weatherFlag = 1
        clearInterval(this.timer)
        console.log(this.timer)
      }
    },
    // 获取权限清单
    async getPermission() {
      let baseIdentity = window.localStorage.getItem('baseIdentity')
      const { data: res } = await this.$http.get(
        `http://106.75.154.40:9003/function/${this.baseId}/${baseIdentity}`,
        {
          headers: {
            Authorization: window.localStorage.getItem('token'),
          },
        }
      )
      if (res.code === 20000) {
        res.data.forEach((item) => {
          if (item.remarks === '溯源管理') {
            this.setPermissionList(item)
          }
        })
      }
    },
  },
  created() {
    this.timer = setInterval(() => {
      this.getBaseInfo()
      this.getPondInfo()
      this.getPermission().then(() => {
        this.$refs.digitalMap.onKeyDown()
        this.getWeather1()
      })
    }, 1000)
  },
  computed: {
    ...mapState(['permissionList']),
  },
}
</script>

<style lang="less" scoped>
.weather-card {
  border: 1px solid black;
}
.weatherContent {
  color: rgb(90, 88, 88);
  box-sizing: border-box;
  padding: 2px 10px;
  border: 1px solid black;
  width: 90%;
  margin: 10px auto 0;
  border-radius: 6px;
  background-color: #cce2ff;
  .weatherTop {
    margin-bottom: 0;
    .weatherDay {
      font-size: 70px;
      font-weight: bold;
      margin: 20px 0;
    }

    .weatherRightTop {
      p {
        font-size: 20px;
        line-height: 0;
        padding: 5px 0;
      }
    }
  }

  .weatherBottom {
    margin-bottom: 0;
    .weatherBL {
      p {
        line-height: 0;
        padding: 5px 0;
      }
    }

    .weatherBR {
      p {
        line-height: 0;
        padding: 5px 0;
      }
    }
  }
}
.el-carousel__item .el-image {
  width: 100%;
  height: 180px;
}
.el-carousel__item {
  border-radius: 4px;
  border: 1px solid rgb(179, 176, 176);
}
.el-carousel {
  border-radius: 4px;
  padding: 2px;
}
.baseInformation {
  margin: 0;
}
.baseInformation i {
  color: rgb(45, 46, 46);
  font-size: 18px;
  margin-right: 10px;
}
.baseInformation p {
  color: #6f7074;
  font-size: 14px;
  margin: 0;
}
#map {
  margin: 0 auto;
  width: 100%;
  height: 100%;
  border: 1px solid rgb(212, 197, 197);
  border-radius: 4px;
}
.cardBody {
  width: 100%;
}
.globalHeader {
  background-color: #eaedf1;
}
.el-carousel {
  .el-carousel__container {
    border: none;
    .el-carousel__item {
      border: none;
    }
  }
}
</style>
